<template>
  <!-- 评论列表,为空时不显示 -->
  <div class="comments" v-if="commentList.length">
    <span class="comments-title">{{commentList.length}} {{message}}</span>
    <!-- 评论 -->
    <div class="comments-item" v-for="comment in commentList" :key="comment.id">
      <!-- 用户头像 -->
      <div class="comments-item-left">
        <img
          class="user-avatar"
          :src="comment.avatar"
          alt="用户头像"
        />
      </div>
      <!-- 昵称和评论评论详情 -->
      <div class="comments-item-right">
        <span class="user-name">{{comment.author}}</span>
        <div class="user-comment">
          {{comment.content}}
        </div>
        <div class="comments-item-bottom">
          <span class="time">{{getFromNow(comment.time)}}</span>
          <div>
            <span>{{comment.likes}}</span>
            <van-icon class="iconfont like" class-prefix="zhi" name="dianzan" />
            <van-icon
              class="iconfont comment"
              class-prefix="zhi"
              name="sixin"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { inject, onBeforeMount, reactive,toRefs } from 'vue'
import { getLongCommentAPI, getShortCommentAPI } from '@/api'
import { getFromNow } from '@/utils/time'

export default {
  name: 'CommentList',
  props: {
    commentType: Number, // 评论类型: 1--长评论, 2--短评论
  },
  setup(props) {
    const id = inject('id') // 获取回答的id
    const state = reactive({
      commentList: [],
      message: props.commentType == 1 ? '条长评论': '条短评论'
    })

    // 获取回答对应的长评论
    const getLongComment = async () => {
      const res = await getLongCommentAPI(id)
      state.commentList = res.data.comments
    }

    // 获取回答对应的短评论
    const getShortComment = async () => {
      const res = await getShortCommentAPI(id)
      state.commentList = res.data.comments
    }


    onBeforeMount(() => {
      if (props.commentType == 1) {
        getLongComment()
      } 
      if(props.commentType ==2) {
        getShortComment()
      }
    })

    return {
      ...toRefs(state),
      getFromNow
    }
  },
}
</script>

<style lang='less' scoped>
.comments {
  &-title {
    padding: 10px 15px;
    display: block;
    font-size: 14px;
    margin-bottom: 10px;
  }
  &-item {
    display: flex;
    padding: 10px 15px 15px 15px;
    border-bottom: 1px solid #eee;
    &-left {
      .user-avatar {
        width: 30px;
        height: 30px;
        margin-right: 10px;
        border-radius: 50%;
      }
    }
    &-right {
      width: 305px;
      .user-name {
        display: block;
        margin-bottom: 5px;
        font-size: 14px;
        font-weight: 700;
      }
      .user-comment {
        font-size: 16px;
        line-height: 24px;
        color: #333;
        word-wrap: break-word;
      }
    }
    &-bottom {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      color: #ccc;
      .time {
        font-size: 12px;
      }
      .like {
        margin-left: 5px;
      }
      .comment {
        margin-left: 30px;
      }
    }
  }
}
</style>